---
comments: false
---

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="jizi2_next_frame.css">
    <link rel="stylesheet" href="jizi2_next_frame2.css">
    <script src="jizi2_next.js"></script>
    <script src="html2canvas.min.js"></script>
    <script src="jizi2_next_color.js"></script>
    <script src="jizi2_switch.js"></script>
    <script src="jizi2_next_setting.js"></script>
    <script src="slider/slider.js"></script>
    <script type="text/javascript" src="colorPicker/colorPicker.js"></script>
    <link rel="stylesheet" type="text/css" href="colorPicker/colorPicker.css" />
    <link rel="stylesheet" href="css/shufaDictCSS.css">
    <link rel="stylesheet" href="jizi2_switch.css">
    <link rel="stylesheet" href="slider/slider.css">
</head>
<style>
    #backButton {
        background-image: url('images/back.png');
        width: 20px;
        height: 20px;
        background-size: cover;
        cursor: pointer;
    }
    #buttonC {
        justify-content: center;
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
</style>
<body>
    <div id="buttonC">
        <div id="backButton"></div>
        <div style="display: none;" id="saveButton">保存</div>
    </div>
    <div id="frame_container">
         <div id="frame_border">
            <div class="frame1">
                <div id="frame_image">
                </div>
            </div>
        </div>
        <div class="frame2">
            <img id="frame_image2" src="" alt="frame" />
        </div>
    </div>
    <div style="padding-bottom: 10px;">卡纸颜色</div>
    <input type="color" id="cp" value="#F5F5F5">
    <!-- 颜色设置 -->
    <!-- 其他设置 -->
    <div id="setting_modal" class="modal2">
        <div class="range-slider">
            <div class="range-slider__range_margin" style="padding-bottom: 0px;">边距（20）</div>
            <input class="range-slider__range" type="range" value="20" min="0" max="30">
            <!-- <span class="range-slider__value">33</span> -->
        </div>
        <div class="range-slider">
            <div class="range-slider__range_radius" style="padding-bottom: 0px;">圆角（0）</div>
            <input class="range-slider__range" type="range" value="0" min="0" max="20">
        </div>

        <div class="range-slider">
            <div class="range-slider__range_leftright" style="padding-bottom: 0px;">大小（30）</div>
            <input class="range-slider__range" type="range" value="30" min="20" max="40">
        </div>
    </div>
    <script>
        hiddenEle();
        var postTitle = document.querySelector('.post-title');
     postTitle.style.display = 'none';

     var headeRight = document.querySelector('.header__right');
    headeRight.style.display = 'none';

    var headeLeft = document.querySelector('.header__left');
    headeLeft.style.display = 'none';
        var elements = document.querySelector('.post-title__text');
        elements.textContent = '装裱'
        var img = document.getElementById('backButton');
        img.addEventListener('click', function () {
            window.history.back()
        });
        document.addEventListener('DOMContentLoaded', function () {
            // 从 Local Storage 中获取图片数据
            const imgData = localStorage.getItem('jizi2_screenshot');
            if (imgData) {
                const imageDiv = document.getElementById('frame_image');
                imageDiv.style.backgroundImage = `url(${imgData})`; // 设置背景图像为截图

                const frameImage = document.getElementById('frame_image');
                const img = new Image();
                img.src = imgData;

                img.onload = function () {
                    const imgWidth = img.naturalWidth; // 获取原始宽度
                    const imgHeight = img.naturalHeight; // 获取原始高度

                    // 计算宽高比
                    const aspectRatio = imgWidth / imgHeight;

                    // 设置 frame_image 的宽高比
                    const frameWidth = frameImage.offsetWidth; // 获取 frame_image 的宽度
                    const frameHeight = frameWidth / aspectRatio; // 根据宽高比计算高度
                };

                const img2 = document.getElementById('frame_image2');
                img2.src = imgData;

            } else {
                console.log('没有找到截图数据');
            }
        });

        var saveButton = document.getElementById('saveButton');
        saveButton.addEventListener('click', function () {
            savaPic()
        });
        function savaPic() {
            const parentElement = document.getElementById('frame_container');
            const frame2 = parentElement.querySelector('.frame2');

            html2canvas(parentElement, {
                useCORS: true,
                allowTaint: false
            }).then(function (canvas) {
                if (!canvas) {
                    console.error('Canvas is null or undefined');
                    return;
                }
                // const contain = document.getElementById('container');
                parentElement.style.visibility = 'hidden'; // 使用 visibility 而不是 display

                var overlay = document.createElement('div');
                overlay.style.position = 'fixed';
                overlay.style.top = '0';
                overlay.style.left = '0';
                overlay.style.width = '100%';
                overlay.style.height = '100%';
                overlay.style.backgroundColor = 'rgba(0,0,0,0.8)';
                overlay.style.zIndex = '9999';
                overlay.style.display = 'flex';
                overlay.style.flexDirection = 'column';
                overlay.style.alignItems = 'center';
                overlay.style.justifyContent = 'center';

                var imgContainer = document.createElement('div');
                imgContainer.style.display = 'flex';
                imgContainer.style.flexDirection = 'column';
                imgContainer.style.alignItems = 'center';
                imgContainer.style.maxWidth = '90%';
                imgContainer.style.maxHeight = '90%';

                var img = document.createElement('img');
                img.src = canvas.toDataURL('image/png');
                img.style.maxWidth = '100%';
                img.style.maxHeight = '80vh';
                img.style.objectFit = 'contain';

                var closeButton = document.createElement('button');
                closeButton.textContent = '关闭';
                closeButton.style.marginTop = '20px';
                closeButton.style.padding = '10px 20px';
                closeButton.style.fontSize = '16px';
                closeButton.style.cursor = 'pointer';
                closeButton.onclick = function () {
                    document.body.removeChild(overlay);
                    parentElement.style.visibility = 'visible'; // 恢复可见性
                };

                imgContainer.appendChild(img);
                imgContainer.appendChild(closeButton);
                overlay.appendChild(imgContainer);
                document.body.appendChild(overlay);

                // 使用 setTimeout 来延迟显示提示，确保图片已经渲染
                setTimeout(function () {
                    alert('请长按图片并选择"保存图像"来下载截图');
                }, 100);
            });
        }

        function pxToVh(px) {
            // 获取视口的高度
            const viewportHeight = window.innerHeight;
            // 计算 vh 值
            const vh = (px / viewportHeight) * 100;
            // 返回结果，保留两位小数
            return vh.toFixed(2) + 'vh';
        }

        // 添加 change 事件监听器
        document.getElementById('cp').addEventListener('change', function (event) {
            const selectedColor = event.target.value;
            const parentElement = document.getElementById('frame_container');
            const childElements = parentElement.querySelector('.frame2');
            childElements.style.backgroundColor = selectedColor;
        });

        var sliders = document.querySelectorAll('.range-slider');
        sliders.forEach(function (slider, index) {
            var range = slider.querySelector('.range-slider__range');
            var value = slider.querySelector('.range-slider__value');

            const parentElement = document.getElementById('frame_container');
            const frame2 = parentElement.querySelector('.frame2');
            const img2 = document.getElementById('frame_image2');
            range.addEventListener('input', function () {
                if (index == 0) {
                    var value = document.querySelector('.range-slider__range_margin');
                    frame2.style.padding = Number(this.value) + 'px';
                    value.textContent = '边距' + '（' + this.value + '）'
                }
                if (index == 1) {
                    var value = document.querySelector('.range-slider__range_radius');
                    value.textContent = '圆角' + '（' + this.value + '）'
                    img2.style.borderRadius = Number(this.value) + 'px';
                }
                if (index == 2) {
                    var value = document.querySelector('.range-slider__range_leftright');
                    frame2.style.height = Number(this.value) + 'vh';
                    value.textContent = '大小' + '（' + this.value + '）'
                }
            });
        });
    </script>
</body>

</html>